<template>
  <template  v-for="(item, index) in data" :key="index">
    <tr :style="{height: 60 + 'px', lineHeight: 60 + 'px'}">
      <template v-for="(colItem, colIndex) in columns" :key="colIndex">
        <td v-if="colItem.key === 'C_INDEX'" width="5%">{{item.indexNum}}</td>
        <td v-else-if="colItem.key === 'cat_name'" width="30%">
          <i class="el-icon-plus" v-if="item.children && !item.isShow" @click="handleShow(item.isShow, item.cat_id)"></i>
          <i class="el-icon-minus" v-if="item.children && item.isShow" @click="handleShow(item.isShow, item.cat_id)"></i>
          {{item[colItem.key]}}
        </td>
        <td v-else-if="colItem.key === 'cat_deleted'">
          <i class="el-icon-success" v-if="item.cat_deleted === false" style="color: lightgreen;"></i>
          <i class="el-icon-error" v-else style="color: red;"></i>
        </td>
        <td v-else-if="colItem.key === 'cat_level'" width="20%">
          <el-tag size="medium" v-if="item.cat_level===0">一级</el-tag>
          <el-tag type="success" size="medium" v-else-if="item.cat_level===1">二级</el-tag>
          <el-tag type="warning" size="medium" v-else>三级</el-tag>
        </td>
        <td v-else>
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleRedactClick(item.cat_id)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteClick(item.cat_id)">删除</el-button>
        </td>
      </template>
    </tr>
    <x-tbody :columns="columns" :data="item.children" v-if="item.isShow"></x-tbody>
  </template>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { emitter } from '../ProductCategories.vue'
import { columnsProps } from '../CategoriesDefaults'

export default defineComponent({
  name: 'XTbody',
  props: {
    columns: {
      type: Array as PropType<columnsProps[]>,
      required: true
    },
    data: {
      type: Array as PropType<any[]>,
      required: true,
      default: () => []
    }
  },
  setup (props: any) {
    const handleShow = (isShow: boolean, id: number) => {
      for (let obj of props.data) {
        if (obj.cat_id == id) {
          // 通过isShow来控制图标和内容的展示
          obj.isShow = !isShow;
        }
      }
    }
    const handleRedactClick = (cad_id: number) => {
      emitter.emit('dialog-redact-click', cad_id)
    }
    const handleDeleteClick = (cat_id: number) => {
      emitter.emit('Delete-click', cat_id)
    }
    return { handleShow, handleRedactClick, handleDeleteClick }
  }
})
</script>
